import React from 'react';
import { Routes, Route, Navigate, Link } from 'react-router-dom';
import style from './index.module.less';
import lazyLoad from '../router/lazyLoad.jsx';
const Home = lazyLoad(() => import('../pages/Home'));
const About = lazyLoad(() => import('../pages/About'));
const User = lazyLoad(() => import('../pages/User'));
const NotFound = lazyLoad(() => import('../pages/NotFound'));

const App = () => {
  return (
    <div className={style.app}>
      <header className={style.appHeader}>
        <Routes>
          <Route path="/" exact element={<Home />}></Route>
          <Route path="about" element={<About />}></Route>
          <Route path="user/*" element={<User />}></Route>
          <Route path="404" exact element={<NotFound />}></Route>
          <Route path="*" element={<Navigate replace to="/404" />}></Route>
        </Routes>
      </header>
    </div>
  )
}

export default App